<template>
  <div class="container mnks-exam" ref="body" data-sp="0">
    <div class="layout-article" ref="comMain" data-sp="0.6">
      <div class="container news-page">
        <div class="exam">
          <div class="row clearfix">
            <div class="col col1">
              <fieldset class="kaochang">
                <legend>理论考试</legend>
                <span>第01考台</span></fieldset>
              <fieldset class="kaosheng">
                <legend>考生信息</legend>
                <div class="author-img"></div>
                <div class="kaosheng-item kemu red">科目一</div>
                <div class="kaosheng-item name">考生姓名：</div>
                <div class="kaosheng-item">考试题数：100</div>
                <div class="kaosheng-item">考试时间：45分钟</div>
                <div class="kaosheng-item">满分100分，90分及格</div>
              </fieldset>
              <fieldset class="daojishi">
                <legend>剩余时间</legend>
                <span class="djs">44:46</span></fieldset>
            </div>
            <div class="col col2">
              <fieldset class="kaoti">
                <legend>考试题目</legend>
                <div data-sp="0.26" class="com-mnks-question-detail">
                  <div class="detail-content" id="ComQuestionInfo_qundefined">
                    <div class="timu"><p>1、机动车仪表板上（如图所示）亮时，提醒发动机需要补充机油。</p></div>
                    <div class="answer-w clearfix">
                      <div data-questionid="889000" data-q-index="0" data-ismul="false" class="options-w left"><p>A、正确</p>
                        <p>B、错误</p></div>
                    </div>
                  </div>
                </div>
                <div class="clearfix">
                  <div class="select-w right"><label>请选择:</label>
                    <button class="select-lable" ref="answerSingle" data-key="A">A</button>
                    <button class="select-lable" ref="answerSingle" data-key="B">B</button>
                  </div>
                </div>
              </fieldset>
              <div class="kaoti-bar clearfix">
                <fieldset class="tishi">
                  <legend>试题提示信息</legend>
                  <span>判断题，请判断对错</span></fieldset>
                <div class="btn-bar">
                  <button class="pre" ref="pre">上一题</button>
                  <button class="next" ref="next">下一题</button>
                  <button class="submit" ref="submit">交卷</button>
                </div>
              </div>
            </div>
            <div class="col col3">
              <div class="datika">
                <ul class="datika-list-w clearfix">
                  <li><a ref="itemClick" data-index="0" data-questionid="889000" class="curr">1</a></li>
                  <li><a ref="itemClick" data-index="1" data-questionid="895300" class="">2</a></li>
                  <li><a ref="itemClick" data-index="2" data-questionid="888600" class="">3</a></li>
                  <li><a ref="itemClick" data-index="3" data-questionid="889900" class="">4</a></li>
                  <li><a ref="itemClick" data-index="4" data-questionid="893400" class="">5</a></li>
                  <li><a ref="itemClick" data-index="5" data-questionid="888800" class="">6</a></li>
                  <li><a ref="itemClick" data-index="6" data-questionid="1100100" class="">7</a></li>
                  <li><a ref="itemClick" data-index="7" data-questionid="876900" class="">8</a></li>
                  <li><a ref="itemClick" data-index="8" data-questionid="1100400" class="">9</a></li>
                  <li><a ref="itemClick" data-index="9" data-questionid="876100" class="">10</a></li>
                  <li><a ref="itemClick" data-index="10" data-questionid="885800" class="">11</a></li>
                  <li><a ref="itemClick" data-index="11" data-questionid="882300" class="">12</a></li>
                  <li><a ref="itemClick" data-index="12" data-questionid="837800" class="">13</a></li>
                  <li><a ref="itemClick" data-index="13" data-questionid="858800" class="">14</a></li>
                  <li><a ref="itemClick" data-index="14" data-questionid="860300" class="">15</a></li>
                  <li><a ref="itemClick" data-index="15" data-questionid="858600" class="">16</a></li>
                  <li><a ref="itemClick" data-index="16" data-questionid="859400" class="">17</a></li>
                  <li><a ref="itemClick" data-index="17" data-questionid="859600" class="">18</a></li>
                  <li><a ref="itemClick" data-index="18" data-questionid="856600" class="">19</a></li>
                  <li><a ref="itemClick" data-index="19" data-questionid="837900" class="">20</a></li>
                  <li><a ref="itemClick" data-index="20" data-questionid="857400" class="">21</a></li>
                  <li><a ref="itemClick" data-index="21" data-questionid="858900" class="">22</a></li>
                  <li><a ref="itemClick" data-index="22" data-questionid="1159300" class="">23</a></li>
                  <li><a ref="itemClick" data-index="23" data-questionid="836900" class="">24</a></li>
                  <li><a ref="itemClick" data-index="24" data-questionid="856700" class="">25</a></li>
                  <li><a ref="itemClick" data-index="25" data-questionid="859000" class="">26</a></li>
                  <li><a ref="itemClick" data-index="26" data-questionid="1119600" class="">27</a></li>
                  <li><a ref="itemClick" data-index="27" data-questionid="829300" class="">28</a></li>
                  <li><a ref="itemClick" data-index="28" data-questionid="802600" class="">29</a></li>
                  <li><a ref="itemClick" data-index="29" data-questionid="1122100" class="">30</a></li>
                  <li><a ref="itemClick" data-index="30" data-questionid="804900" class="">31</a></li>
                  <li><a ref="itemClick" data-index="31" data-questionid="1126500" class="">32</a></li>
                  <li><a ref="itemClick" data-index="32" data-questionid="1097100" class="">33</a></li>
                  <li><a ref="itemClick" data-index="33" data-questionid="1188200" class="">34</a></li>
                  <li><a ref="itemClick" data-index="34" data-questionid="806300" class="">35</a></li>
                  <li><a ref="itemClick" data-index="35" data-questionid="1129000" class="">36</a></li>
                  <li><a ref="itemClick" data-index="36" data-questionid="1093800" class="">37</a></li>
                  <li><a ref="itemClick" data-index="37" data-questionid="825300" class="">38</a></li>
                  <li><a ref="itemClick" data-index="38" data-questionid="1122300" class="">39</a></li>
                  <li><a ref="itemClick" data-index="39" data-questionid="810200" class="">40</a></li>
                  <li><a ref="itemClick" data-index="40" data-questionid="888200" class="">41</a></li>
                  <li><a ref="itemClick" data-index="41" data-questionid="892100" class="">42</a></li>
                  <li><a ref="itemClick" data-index="42" data-questionid="886500" class="">43</a></li>
                  <li><a ref="itemClick" data-index="43" data-questionid="886600" class="">44</a></li>
                  <li><a ref="itemClick" data-index="44" data-questionid="1161900" class="">45</a></li>
                  <li><a ref="itemClick" data-index="45" data-questionid="889400" class="">46</a></li>
                  <li><a ref="itemClick" data-index="46" data-questionid="891700" class="">47</a></li>
                  <li><a ref="itemClick" data-index="47" data-questionid="1161100" class="">48</a></li>
                  <li><a ref="itemClick" data-index="48" data-questionid="887200" class="">49</a></li>
                  <li><a ref="itemClick" data-index="49" data-questionid="1131600" class="">50</a></li>
                  <li><a ref="itemClick" data-index="50" data-questionid="874300" class="">51</a></li>
                  <li><a ref="itemClick" data-index="51" data-questionid="870000" class="">52</a></li>
                  <li><a ref="itemClick" data-index="52" data-questionid="881100" class="">53</a></li>
                  <li><a ref="itemClick" data-index="53" data-questionid="883900" class="">54</a></li>
                  <li><a ref="itemClick" data-index="54" data-questionid="1131300" class="">55</a></li>
                  <li><a ref="itemClick" data-index="55" data-questionid="884200" class="">56</a></li>
                  <li><a ref="itemClick" data-index="56" data-questionid="868400" class="">57</a></li>
                  <li><a ref="itemClick" data-index="57" data-questionid="1132000" class="">58</a></li>
                  <li><a ref="itemClick" data-index="58" data-questionid="841500" class="">59</a></li>
                  <li><a ref="itemClick" data-index="59" data-questionid="850400" class="">60</a></li>
                  <li><a ref="itemClick" data-index="60" data-questionid="853400" class="">61</a></li>
                  <li><a ref="itemClick" data-index="61" data-questionid="851100" class="">62</a></li>
                  <li><a ref="itemClick" data-index="62" data-questionid="863600" class="">63</a></li>
                  <li><a ref="itemClick" data-index="63" data-questionid="866300" class="">64</a></li>
                  <li><a ref="itemClick" data-index="64" data-questionid="849100" class="">65</a></li>
                  <li><a ref="itemClick" data-index="65" data-questionid="843400" class="">66</a></li>
                  <li><a ref="itemClick" data-index="66" data-questionid="866600" class="">67</a></li>
                  <li><a ref="itemClick" data-index="67" data-questionid="865200" class="">68</a></li>
                  <li><a ref="itemClick" data-index="68" data-questionid="864100" class="">69</a></li>
                  <li><a ref="itemClick" data-index="69" data-questionid="850900" class="">70</a></li>
                  <li><a ref="itemClick" data-index="70" data-questionid="851400" class="">71</a></li>
                  <li><a ref="itemClick" data-index="71" data-questionid="847000" class="">72</a></li>
                  <li><a ref="itemClick" data-index="72" data-questionid="861700" class="">73</a></li>
                  <li><a ref="itemClick" data-index="73" data-questionid="856300" class="">74</a></li>
                  <li><a ref="itemClick" data-index="74" data-questionid="865800" class="">75</a></li>
                  <li><a ref="itemClick" data-index="75" data-questionid="847900" class="">76</a></li>
                  <li><a ref="itemClick" data-index="76" data-questionid="862900" class="">77</a></li>
                  <li><a ref="itemClick" data-index="77" data-questionid="846300" class="">78</a></li>
                  <li><a ref="itemClick" data-index="78" data-questionid="862700" class="">79</a></li>
                  <li><a ref="itemClick" data-index="79" data-questionid="1092300" class="">80</a></li>
                  <li><a ref="itemClick" data-index="80" data-questionid="1126800" class="">81</a></li>
                  <li><a ref="itemClick" data-index="81" data-questionid="809600" class="">82</a></li>
                  <li><a ref="itemClick" data-index="82" data-questionid="826000" class="">83</a></li>
                  <li><a ref="itemClick" data-index="83" data-questionid="808500" class="">84</a></li>
                  <li><a ref="itemClick" data-index="84" data-questionid="822000" class="">85</a></li>
                  <li><a ref="itemClick" data-index="85" data-questionid="833300" class="">86</a></li>
                  <li><a ref="itemClick" data-index="86" data-questionid="1095000" class="">87</a></li>
                  <li><a ref="itemClick" data-index="87" data-questionid="1124600" class="">88</a></li>
                  <li><a ref="itemClick" data-index="88" data-questionid="833700" class="">89</a></li>
                  <li><a ref="itemClick" data-index="89" data-questionid="807200" class="">90</a></li>
                  <li><a ref="itemClick" data-index="90" data-questionid="1155700" class="">91</a></li>
                  <li><a ref="itemClick" data-index="91" data-questionid="833900" class="">92</a></li>
                  <li><a ref="itemClick" data-index="92" data-questionid="805200" class="">93</a></li>
                  <li><a ref="itemClick" data-index="93" data-questionid="1096400" class="">94</a></li>
                  <li><a ref="itemClick" data-index="94" data-questionid="834700" class="">95</a></li>
                  <li><a ref="itemClick" data-index="95" data-questionid="1092400" class="">96</a></li>
                  <li><a ref="itemClick" data-index="96" data-questionid="814200" class="">97</a></li>
                  <li><a ref="itemClick" data-index="97" data-questionid="826800" class="">98</a></li>
                  <li><a ref="itemClick" data-index="98" data-questionid="834100" class="">99</a></li>
                  <li><a ref="itemClick" data-index="99" data-questionid="1120900" class="">100</a></li>
                </ul>
              </div>
            </div>
          </div>
          <fieldset class="tishi-img">
            <legend>图片信息</legend>
            <div class="media-w"><img src="http://file.open.jiakaobaodian.com/tiku/res/889000.jpg"
                                      alt="机动车仪表板上（如图所示）亮时，提醒发动机需要补充机油。" ref="bigImg"></div>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
